<script setup>
	import {
		ref,
		reactive,
		toRefs,
		computed,
		onMounted,
		watch,
	} from 'vue'

	import {
		useRoute
	} from "vue-router";
	import router from '@/router'
	import api from '@/api/api';
	import util from '@/utils/util';
	import {
		ElMessage,
		ElMessageBox,
	} from 'element-plus'

	// 组件
	import ApplyFormVue from './components/apply-form.vue';
	import ApplyForm1Vue from './components/apply-form1.vue';

	// 参数
	const pages = reactive({

		query: {
			id: '',
		},

		api_data: {
			bmType: 1,
		},

		users: [],

		tab: [{
				name: '个人报名',
				id: 1
			},
			{
				name: '团队报名',
				id: 2
			},
		],

		popup: false,

		info: {},
		list: [],
		total: 0,
	})

	// 挂载
	onMounted(() => {
		init(); // 初始化
	})

	// 初始化
	async function init() {
		util.showLoading();

		// 获取参数
		pages.query = useRoute().query;
		const {
			id
		} = pages.query;

		// 无关键参数直接返回首页
		if (!id) return util.to('/home');

		// 获取详情
		pages.info = await api.details.getSkill(id)

		// 所有的赛事
		pages.list = await api.index.allSkill();

		// 获取tab
		getTab(pages.info.bmType);

		// 获取学校列表
		getSchoolDept();

		util.hideLoading();
	}

	// 赛事发生变化
	watch(() => pages.query.id, async (id) => {
		// 获取详情
		pages.info = await api.details.getSkill(id)
		// 获取tab
		getTab(pages.info.bmType);
	})

	// 获取tab
	function getTab(bmType) {
		// 1 个人 2 团队 3 不限
		if (bmType == 1) {
			pages.api_data.bmType = 1;
			pages.tab = [{
				name: '个人报名',
				id: 1
			}]
		} else if (bmType == 2) {
			pages.api_data.bmType = 2;
			pages.tab = [{
				name: '团队报名',
				id: 2
			}]
		}
	}

	// 获取学校列表
	async function getSchoolDept() {
		pages.schoolDept = await api.user.getDeptlist({
			deptName: "", // 部门名称
			parentId: "", // 父级Id
			deptId: 100, // 100 是学校
		})
	}

	// 保存成员
	async function changeTeamSave(e) {

		const {
			query,
			api_data,
			users
		} = pages;

		const item = {
			skillId: query.id,
			...e,
			...api_data,
		}

		// 学号不可重复
		const obj = pages.users.find(e => e.studyNo === item.studyNo);
		if (obj) return ElMessage('学号不可重复');

		// 查看是否重复
		const res = await api.user.isBmByStudyNo({
			skillId: query.id,
			studyNo: item.studyNo,
		});
		// console.log(res);
		if(!res) return;
		
		pages.users.push(item);
		pages.popup = false;
	}

	// 删除
	function changeDele(item, index) {
		pages.users.splice(index, 1);
	}

	// 提交申请
	async function changeSave(e) {

		const {
			// query,
			api_data,
			users
		} = pages;

		let data = api_data.bmType == 1 ? [{
			...e,
		}] : users;

		// console.log(data);
		// return;

		// 报名
		const res = await api.user.apply(data);
		if (!res) return;

		ElMessageBox.alert('提交申请成功！', '系统通知', {
			// autofocus: false,
			confirmButtonText: '我知道了',
			callback: (action) => {
				// console.log(action);
				router.go(-1);
			},
		})
	}
</script>

<template>
	<div class="apply">
		<div class="top">
			<el-breadcrumb separator="》">
				<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
				<el-breadcrumb-item>赛事报名</el-breadcrumb-item>
			</el-breadcrumb>
		</div>

		<!-- 选择赛事 -->
		<div class="main-top">
			<div class="form">
				<apply-form1-vue :list="pages.list" v-model="pages.query.id" />
			</div>
		</div>

		<div class="main">
			<div class="l-tab-div">
				<l-tab type="second" bottomLine :tab="pages.tab" v-model="pages.api_data.bmType" />
			</div>

			<!-- 个人 -->
			<div class="form">

				<apply-form-vue :bmType="pages.api_data.bmType" :id="pages.query.id" :schoolDept="pages.schoolDept"
					@changeSave="changeSave" v-if="pages.api_data.bmType == 1" />

				<!-- 团队列表 -->
				<div class="l-card-div" v-else>

					<!-- card -->
					<l-card type="team" :item="item" :num="index+1" v-for="(item,index) in pages.users" :key="index"
						@dele="changeDele($event,index)" />

					<!-- 添加成员 -->
					<p class="add" @click="pages.popup = true">
						<el-icon>
							<Plus />
						</el-icon>
						<span>添加成员</span>
					</p>

					<!-- 提交申请 -->
					<l-button value="提交申请" @change="changeSave" />
				</div>
			</div>

		</div>
	</div>

	<el-dialog v-model="pages.popup" title="添加团队成员" width="900">
		<div style="padding-right: 20px;">
			<apply-form-vue :bmType="pages.api_data.bmType" :id="pages.query.id" :schoolDept="pages.schoolDept"
				buttonText="保存成员" @changeSave="changeTeamSave" />
		</div>
		<template #footer>
		</template>
	</el-dialog>

</template>

<style lang="scss" scoped>
	.apply {
		padding: 0 200px;
		background-color: #F7F9FB;

		.top {
			height: 80px;
			display: flex;
			align-items: center;
		}

		.main-top {
			background-color: white;
			// padding: 24px 0;
			padding-bottom: 12px;
			margin-bottom: 20px;
		}

		.main {
			background-color: white;
			padding-top: 20px;
			padding-bottom: 38px;
			margin-bottom: 40px;

			.l-tab-div {
				display: flex;
				justify-content: center;
			}
		}
	}

	.form {
		width: 850px;
		margin: 0 auto;
	}

	.l-card-div {
		margin-top: 30px;
		display: grid;
		gap: 10px;
		grid-template-columns: repeat(1, 1fr);


		.add {
			display: flex;
			align-items: center;
			justify-content: center;
			background-color: #F5F8FD;
			line-height: 42px;
			font-size: 14px;
			color: #5173F2;
			cursor: pointer;
			border: 2px dashed #5173F2;

			span {
				margin-left: 10px;
			}

			&:hover {
				color: white;
				background-color: #79BBFF;
			}
		}

		.l-button {
			margin: 0 auto;
			margin-top: 40px;
			width: 360px;
			line-height: 48px;
			font-size: 16px;
		}
	}
</style>